import 'package:flutter/material.dart';
import 'package:wallet_home/tools/theme_utils.dart';
import '../models/dropdown_menu_model.dart';
import '../provides/dropdown_menu_controller.dart';

typedef MenuOpenCallback = void Function(bool isOpen);

class DropDownHeader extends StatefulWidget {
  final Color color;
  final double borderWidth;
  final Color borderColor;
  final TextStyle style;
  final TextStyle dropDownStyle;
  final double iconSize;
  final Color iconColor;
  final iconDropDownColor;

  final double height;
  final double dividerHeight;
  final Color dividerColor;
  final DropdownMenuController controller;
  final OnItemTap onItemTap;

  // final List<DropDownHeaderItem> items;
  final DropDownHeaderItem item;
  final GlobalKey stackKey;
  final MenuOpenCallback callback;

  DropDownHeader(
      {Key key,
      // @required this.items,
      @required this.item,
      @required this.controller,
      @required this.stackKey,
      this.style = const TextStyle(color: Color(0xFF666666), fontSize: 13),
      this.dropDownStyle,
      this.height = 70,
      this.iconColor = const Color(0xFFafada7),
      this.iconDropDownColor,
      this.iconSize = 20,
      this.borderWidth = 1,
      this.borderColor = const Color(0xFFeeede6),
      this.dividerColor = const Color(0xFFeeede6),
      this.dividerHeight = 20,
      this.onItemTap,
      this.color = Colors.white,
      this.callback})
      : super(key: key);

  @override
  State<StatefulWidget> createState() => _DropDownHeaderState();
}

class _DropDownHeaderState extends State<DropDownHeader>
    with SingleTickerProviderStateMixin {
  GlobalKey _keyDropDownHeader = GlobalKey();
  double _screenWidth;

  // int _menuCount;
  bool _isShowDropDownItemWidget = false;
  TextStyle _dropDownStyle;
  Color _iconDropDownColor;

  @override
  void initState() {
    super.initState();
    widget.controller.addListener(() {
      if (mounted) {
        setState(() {});
      }
    });
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    _dropDownStyle = widget.dropDownStyle ??
        TextStyle(color: Theme.of(context).primaryColor, fontSize: 13);
    _iconDropDownColor =
        widget.iconDropDownColor ?? Theme.of(context).primaryColor;

    MediaQueryData mediaQuery = MediaQuery.of(context);
    _screenWidth = mediaQuery.size.width;
    // _menuCount = widget.items.length;
    // var gridView = GridView.count(
    //     crossAxisCount: _menuCount,
    //     physics: NeverScrollableScrollPhysics(),
    //     childAspectRatio: (_screenWidth / _menuCount) / widget.height,
    //     children: widget.items.map<Widget>((item) {
    //       return _menuItemWidget(item);
    //     }).toList());

    return Container(
      key: _keyDropDownHeader,
      height: widget.height,
      // height: 70.0,
      decoration: BoxDecoration(
          border:
              Border.all(color: widget.borderColor, width: widget.borderWidth)),
      child: Container(
        height: 40.0,
        padding: EdgeInsets.symmetric(horizontal: 15.0, vertical: 10.0),
        // child: gridView,
        child: _menuItemWidget(widget.item),
      ),
    );
  }

  _menuItemWidget(DropDownHeaderItem item) {
    // int index = widget.items.indexOf(item);
    // int menuIndex = widget.controller.menuIndex;
    // _isShowDropDownItemWidget = index == menuIndex && widget.controller.isShow;
    return GestureDetector(
      onTap: () {
        final RenderBox overlay =
            widget.stackKey.currentContext.findRenderObject();
        final RenderBox dropDownItemRenderBox =
            _keyDropDownHeader.currentContext.findRenderObject();
        var position =
            dropDownItemRenderBox.localToGlobal(Offset.zero, ancestor: overlay);
        var size = dropDownItemRenderBox.size;
        widget.controller.dropDownHeaderHeight = size.height + position.dy;

        // if (index == menuIndex) {
        //   if (widget.controller.isShow) {
        //     widget.controller.hide();
        //   } else {
        //     // widget.controller.show(index);
        //     widget.controller.show();
        //   }
        // } else {
        if (widget.controller.isShow) {
          // widget.controller.hide(isShowHideAnimation: false);
          widget.callback(false);
          widget.controller.hide();
        } else {
          widget.callback(true);
          widget.controller.show();
        }
        // widget.controller.show(index);

        // }
        if (widget.onItemTap != null) {
          // widget.onItemTap(index);
          widget.onItemTap();
        }
        setState(() {});
      },
      // child: UnconstrainedBox(
      child: Container(
        // padding: EdgeInsets.symmetric(horizontal: 15.0),
        // height: 50.0,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(5.0),
            border: Border.all(
                color: ThemeUtils.getThemeColor(
                    context: context,
                    brightnessColor: Colors.grey[300],
                    darkColor: Colors.white),
                width: 1.0,
                style: BorderStyle.solid)),
        // color: widget.color,
        // color: Colors.red,
        // padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 35.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
                child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                // Flexible(
                //     child: Text(
                //   item.title,
                //   maxLines: 1,
                //   overflow: TextOverflow.ellipsis,
                //   style: _isShowDropDownItemWidget
                //       ? _dropDownStyle
                //       : widget.style.merge(item.style),
                // )),
                SizedBox(
                  width: 15.0,
                ),
                Text(item.title ?? '',
                    style: TextStyle(
                        color: ThemeUtils.getThemeColor(
                            context: context,
                            brightnessColor: Colors.grey[600],
                            darkColor: Colors.white))),
                Spacer(),
                Icon(
                  !_isShowDropDownItemWidget
                      ? item.iconData ?? Icons.arrow_drop_down
                      : item.iconData ?? Icons.arrow_drop_up,
                  color: _isShowDropDownItemWidget
                      ? _iconDropDownColor
                      : item?.style?.color ?? widget.iconColor,
                  size: item.iconSize ?? widget.iconSize,
                ),
                SizedBox(
                  width: 15.0,
                ),
              ],
            )),
            // index == widget.items.length - 1
            //     ? Container()
            //     : Container(
            //         height: widget.dividerHeight,
            //         decoration: BoxDecoration(
            //             border: Border(
            //                 right: BorderSide(
            //                     color: widget.dividerColor, width: 1))),
            //       )
          ],
        ),
      ),
      // ),
    );
  }
}
